<!DOCTYPE HTML>

<html>
	<head>
		<link rel="shortcut icon" href="https://monkeyhbd.gitee.io/image/mokey-land.png">
		<!-- Welcome to visit monkeyhbd.gitee.io. -->
		<title>注册 | Monkeyhbd</title>
		<meta name="viewport" content="width=device-width initial-scale=1">
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="./common.css">
		<script src="./register.js"></script>
		<style>
			#agree-box
			{
				margin: 20px;
				font-size: 0.9em;
				color: gray;
			}
			#agree-input-box
			{
				display: inline-block;
			}
			.agree-option
			{
				text-align: left;
			}
			#slogan-input
			{
				border-radius: 5px;
				font-size: 1em;
				width: 12em;
				height: 4em;
				margin: 5px;
				padding: 3px;
				resize: none;
			}
			#verification-input-box
			{
				display: inline-block;
				width: 12em;
				margin: 5px;
				padding: 3px;
			}
			#verification-input
			{
				vertical-align: middle;
				width: 4em;
				height: 20px;
			}
			#verification-image-box
			{
				display: inline-block;
				vertical-align: middle;
				height: 20px;
				width: 80px;
				margin: 5px;
				padding: 3px;
				background-color: white;
			}
		</style>
	</head>

	<body>
		<div style="text-align: center;">
			<div id="register-container">
				<div id="title-box">
					<h1>欢迎注册</h1>
				</div>

				<div id="phone-box" class="one-line-box">
					<p>手机号码</p> <input id="phone-input" type="text">
				</div>

				<div id="email-box" class="one-line-box">
					<p>邮箱</p> <input id="email-input" type="text">
				</div>

				<div id="password-box" class="one-line-box">
					<p>密码</p> <input id="password-input" type="password">
				</div>

				<hr>

				<div id="image-box" class="one-line-box">
					<p style="vertical-align:top">头像</p>
					<div id="image-input-box">
						<input id="image-input" type="file" onchange="changepic(this)" style="text-align: left;">
						<div style="display: inline-block">
							<img id="image-preview">
						</div>
					</div>
				</div>

				<div id="username-box" class="one-line-box">
					<p>用户名</p> <input id="username-input" type="text">
				</div>

				<div id="slogan-box" class="one-line-box">
					<p style="vertical-align:top">个性签名</p>
					<textarea id="slogan-input"></textarea>
				</div>

				<div id="birthday-box" class="one-line-box">
					<p>生日</p> <input id="birthday-input" type="date">
				</div>

				<div id="sex-box" class="one-line-box">
					<p>性别</p>
					<div id="sex-input-box">
						<input id="male-input" type="radio" name="sex" value="Male">男
						<input id="female-input" type="radio" name="sex" value="Female">女
					</div>
				</div>

				<div id="region-box" class="one-line-box">
					<p>国家地区</p>
					<div id="region-input-box">
						<select id="nation-input" onchange="change_city()">
							<option>中国</option>
							<option>俄罗斯</option>
							<option>美国</option>
						</select><select id="city-input">
							<option>北京</option>
							<option>武汉</option>
							<option>上海</option>
						</select>
						<script>
							change_city();
						</script>
					</div>
				</div>

				<div id="height-box" class="one-line-box">
					<p>身高</p>
					<div id="height-input-box">
						<input id="height-input" type="range" min="100" max="200" oninput="update_height()">
						<div id="height-value">
							150
						</div>
						<script>
							update_height();
						</script>
					</div>
				</div>

				<hr>

				<div id="verification-box" class="one-line-box">
					<p>验证码</p>
					<div id="verification-input-box">
						<input id="verification-input">
						<div id="verification-image-box" onclick="change_verification_code()">
							<img id="verification-image" height="20px" width="80px">
						</div>
						<script>
							change_verification_code()
						</script>
					</div>
				</div>

				<div id="agree-box">
					<div id="agree-input-box">
						<div class="agree-option">
							<input id="email-agree-input" type="checkbox" name="agree" value="0">
							<label>允许通过邮件了解更新</label>
						</div>
						<div class="agree-option">
							<input id="protocol-agree-input" type="checkbox" name="agree" value="1">
							<label>同意
								<a href="https://monkeyhbd.gitee.io" target="_blank" style="text-decoration: none;">《用户协议》</a>
							</label>
						</div>
					</div>
				</div>

				<button id="register-button" type="button" onclick="get_info()">
					注册
				</button>
			</div>
		</div>
	</body>
</html>
